<template>
  <a-card>
    <div class="title">
      <div class="title-left">
        {{ $t('user.verification-code.required111566110577232') }}
      </div>
      <div class="title-right">
        <p>{{ $t('user.verification-code.required111566110577233') }} <span>{{ $t('user.verification-code.required111566110577234') }}</span></p>
        <p>{{ $t('user.verification-code.required111566110577235') }} <span>{{ $t('user.verification-code.required111566110577236') }}</span></p>
        <p>{{ $t('user.verification-code.required111566110577237') }} <span>HP.G4</span></p>
      </div>
    </div>

    <a-table :columns="columns" :data-source="data" bordered>
      <template slot="assets" slot-scope="text">
        <a>{{ text }}</a>
      </template>
      <template slot="title">
        {{ $t( 'user.verification-code.required111566110577238') }}
      </template>
    </a-table>

    <a-table :columns="columns" :data-source="data" bordered>
      <template slot="assets" slot-scope="text">
        <a>{{ text }}</a>
      </template>
      <template slot="title">
        {{ $t( 'user.verification-code.required111566110577239') }}
      </template>
    </a-table>

  </a-card>
</template>

<script>

const columns = [
  {
    title: '涉及的应用系统（数据资产）',
    dataIndex: 'assets',
    scopedSlots: { customRender: 'assets' },
  },
  {
    title: '数据主体数量',
    dataIndex: 'num',
  },
  {
    title: '相关RPA',
    dataIndex: 'aboutRPA',
  },
  {
    title: '涉及数据处理活动周期的哪个阶段',
    dataIndex: 'stage',
  },
  {
    title: '涉及数据处理活动类型',
    dataIndex: 'activeTyep',
  },
];
const data = [
  {
    key: '1',
    assets: 'APP001->Table01->ID Card',
    num: '>100,000',
    aboutRPA: 'RPA005,取送车服务-滴滴代驾（2023/02/21，BBS-B-5.Lockett...）',
    stage: '收集，传输，使用，删除和存储',
    activeTyep: '移动端应用，数据融合，算法和自动化决策，数据跨境，数据委托，数据共享'
  },
  {
    key: '2',
    assets: 'APP001->Table01->ID Card',
    num: '>100,000',
    aboutRPA: 'RPA005,取送车服务-滴滴代驾（2023/02/21，BBS-B-5.Lockett...）',
    stage: '收集，传输，使用，删除和存储',
    activeTyep: '移动端应用，数据融合，算法和自动化决策，数据跨境，数据委托，数据共享'
  },
  {
    key: '3',
    assets: 'APP001->Table01->ID Card',
    num: '>100,000',
    aboutRPA: 'RPA005,取送车服务-滴滴代驾（2023/02/21，BBS-B-5.Lockett...）',
    stage: '收集，传输，使用，删除和存储',
    activeTyep: '移动端应用，数据融合，算法和自动化决策，数据跨境，数据委托，数据共享'
  },
  {
    key: '4',
    assets: 'APP001->Table01->ID Card',
    num: '>100,000',
    aboutRPA: 'RPA005,取送车服务-滴滴代驾（2023/02/21，BBS-B-5.Lockett...）',
    stage: '收集，传输，使用，删除和存储',
    activeTyep: '移动端应用，数据融合，算法和自动化决策，数据跨境，数据委托，数据共享'
  },
];

export default {
  data() {
    return {
      data,
      columns,
    };
  },
}
</script>

<style lang="less" scoped>
.title {
  margin-bottom: 30px;
  display: flex;
  align-items: center;
}

.title-left {
  font-size: 30px;
  font-weight: 700;
  line-height: 60px;
  padding-right: 20px;
  margin-right: 20px;
  border-right: 3px solid #999;
}

.title-right span {
  color: orange
}

/deep/ .ant-table-title {
  background: #555;
  color: #FFF;
  font-size: 20px;
  font-weight: 700;
}
</style>